<template>
  <div class="property-panel">
    <el-scrollbar style="height:100%;">
      <props-data />
    </el-scrollbar>
  </div>
</template>

<script>
import PropsData from './props'
// import TestData from './test'

export default {
  components: { PropsData },
  data() {
    return {}
  },
  methods: {
    onTabClick(event) {
      // 主动触发resize消息(调整子组件的高度)
      // https://www.jianshu.com/p/5f9027722204
      // window.dispatchEvent(new Event('resize'))
    }
  }
}
</script>

<style lang="scss">
@import '../../style/variable.scss';
.property-panel {
  height: 100%;
  overflow: hidden;
  // overflow-y: auto;
  @extend %toolbar-color;
  .el-tabs {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    // align-items: stretch;
    overflow: hidden;
  }
  .el-tabs--border-card {
    margin-top: 0px !important;
    margin-bottom: 5px !important;
  }
  // TODO: flex=0与flex=1貌似不能同时使用(ie11???)
  .el-tabs__header {
    // flex: 0; // ie下有问题,chrome则正常
    flex-grow: 0;
  }
  .el-tabs__content {
    flex: 1;
  }
  .el-tab-pane {
    height: 100% !important;
  }
  @import '../../style/scrollbar.scss';
  @import '../../style/panel.scss';
}
</style>
